<template>
  <div id="app">
    <el-container style="height: 80%; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '']">
          <el-menu-item index="1"><i class="el-icon-s-home"></i>首页</el-menu-item>
          <el-submenu index="2" >
                <template slot="title"><i class="el-icon-s-platform"></i>系统管理</template>

                <!-- <template slot="title">分组一</template> -->
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>

                <el-menu-item index="2-3">选项3</el-menu-item>

                <el-submenu index="2-4">
                   <template slot="title">选项4</template>
                   <el-menu-item index="2-4-1">选项1</el-menu-item>
                </el-submenu>   
          </el-submenu>
          <el-submenu index="3">
                <template slot="title"><i class="el-icon-menu"></i>质检管理</template>
                <el-menu-item-group title="分组1">
                    <!-- <template slot="title">分组一</template> -->
                    <el-menu-item index="3-1">选项1</el-menu-item>
                    <el-menu-item index="3-2">选项2</el-menu-item>
                </el-menu-item-group>
                <el-menu-item-group title="分组2">
                    <el-menu-item index="3-3">选项3</el-menu-item>
                </el-menu-item-group>
               <el-submenu index="3-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="3-4-1">选项4-1</el-menu-item>
               </el-submenu>
        </el-submenu>
        <el-submenu index="4">
              <template slot="title"><i class="el-icon-setting"></i>工单配置</template>
              <el-menu-item-group>
                    <template slot="title">分组一</template>
                    <el-menu-item index="4-1">选项1</el-menu-item>
                    <el-menu-item index="42">选项2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="分组2">
                    <el-menu-item index="4-3">选项3</el-menu-item>
              </el-menu-item-group>
              <el-submenu index="4-4">
                    <template slot="title">选项4</template>
                    <el-menu-item index="4-4-1">选项4-1</el-menu-item>
              </el-submenu>
        </el-submenu>
      <el-submenu index="5" >
                <template slot="title"><i class="el-icon-document"></i>工单报表</template>

                <!-- <template slot="title">分组一</template> -->
                <el-menu-item index="5-1">选项1</el-menu-item>
                <el-menu-item index="5-2">选项2</el-menu-item>

                <el-menu-item index="5-3">选项3</el-menu-item>

                <el-submenu index="5-4">
                   <template slot="title">选项4</template>
                   <el-menu-item index="5-4-1">选项1</el-menu-item>
                </el-submenu>   
          </el-submenu>
          <el-submenu index="6" >
            
                <template slot="title"><i class="el-icon-document"></i>工单管理</template>
                <router-link to="PersonInformation"><el-menu-item index="6-1" >工单升级管理</el-menu-item></router-link>
                <!-- <template slot="title">分组一</template> -->
                
                <el-menu-item index="6-2">选项2</el-menu-item>

                <el-menu-item index="6-3">选项3</el-menu-item>

                <el-submenu index="6-4">
                   <template slot="title">选项4</template>
                   <el-menu-item index="6-4-1">选项1</el-menu-item>
                </el-submenu>   
          </el-submenu>
    </el-menu>
  </el-aside>
  <el-container >

      <el-row>
        <el-col :span="24">
           陆鲜<el-avatar icon="el-icon-user-solid" ></el-avatar>
        </el-col>
     </el-row>
     <el-row>
     <el-col :span="24">导航栏</el-col>  
     </el-row>
     <el-row>
     <el-col :span="24">列表搜索栏</el-col>  
     </el-row>

    <el-main>
      <router-view></router-view>
    </el-main>
    <el-footer></el-footer>
  </el-container>

</el-container>
    
  </div>
</template>

<script>
export default {
    data() {
    }
  };
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
.el-header {
    background-color: #B3C0D1;
    color: #333; 
    line-height: 60px;
  }
  
  .el-aside {
    color: #333;
  }
  .bg-purple {
    background: #d3dce6;
  }
   


</style>
